<template>
  <!--  外层版心盒子-->
  <div class="W">
    <div class="www">
      <div class="box-left">
        <el-col>
          <div class="left-card">
            <el-card>
              <el-collapse>
                <el-collapse-item title="练习室">
                  <div style="color: deeppink;">
                    <div class="myRoom">
                      <router-link to="/trainingRoom/default" active-class="a">我的练习室</router-link>
                    </div>
                  </div>
                </el-collapse-item>
              </el-collapse>
            </el-card>
          </div>

        </el-col>
      </div>

      <!--          <router-view/>-->


      <div class="left-Bottom">
        <el-col>
          <el-card style="border-radius: 4px">
            <el-menu class="el-menu-vertical-demo" style="color: #111111; background-color: white">

              <router-link to="/trainingRoom/cache">
                <div class="router-div">
                  缓存
                </div>
              </router-link>

              <router-link to="/trainingRoom/audio">
                <div class="router-div">
                  音频库
                </div>
              </router-link>

              <router-link to="/trainingRoom/collect">
                <div class="router-div">
                  收藏
                </div>
              </router-link>


              <router-link to="/trainingRoom/history">
                <div class="router-div">
                  历史
                </div>
              </router-link>
            </el-menu>
          </el-card>
        </el-col>
      </div>
    </div>


    <!--复制代码-->


    <div class="box-right">
      <router-view/>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
  name: "index",
});
</script>

<script setup lang="ts">
import {reqHistoryList} from '@/api/trainingRoom/index'
import {onMounted} from "vue";

const getHistoryList = async () => {
  const res = await reqHistoryList(1, 4)
  console.log(res)
}
onMounted(() => {
  getHistoryList()
})
</script>

<style lang="scss" scoped>

//版心
.W {

  width: 1200px;
  height: 900px;
  margin: 0 auto;

  //左上侧盒子
  .left-card {
    margin-top: 10px;
    width: 180px;
    //我的练习室
    .myRoom {
      margin-left: 30px;
    }
  }


  a {

    color: #2d2e2f;
    outline: none;
    text-decoration: none;

  }

  //  右下
  .left-Bottom {
    width: 180px;
    margin-top: 18px;
  }

}

.www {
  float: left;
  width: 180px;
}

.box-left {
  display: flex
}

.box-right {
  border-radius: 5px;
  margin-top: 10px;
  margin-left: 10px;
  background-color: white;
  height: 702px;
  width: 1000px;
  float: left;
}

//左上侧盒子的撑开

.el-collapse-item__header {
  margin: 50px;
}

//左上侧盒子的撑开下边框的线条
.el-collapse {
  --el-collapse-border-color: none
}

.el-menu {
  border-right: white;
}



.router-div{
  margin: 10px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
</style>
